// Copyright (c) 2025 coze-dev Authors
// SPDX-License-Identifier: Apache-2.0
/* stylelint-disable declaration-no-important */
.variable-input {
  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 3px 12px 8px;

  background: #fff;
  border: 1px solid rgba(68, 83, 130, 20%);
  border-radius: 6px;

  .delete-btn{
    display: none;
  }

  &:hover {
    .delete-btn{
      display: inline-flex;
    }
  }

  &-active{
    border: 1px solid rgba(var(--coze-up-brand-9), 1);
  }

  :global{
    .semi-input-textarea{
      padding: 0 !important;
      font-size: 13px;
    }

    .semi-input{
      font-size: 13px;
    }
  }
}

.coz-popconfirm-foot{
  justify-content: flex-end;
}

.placeholder-message-wrap{
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;

  background: var(--Bg-COZ-bg-max, #FFF);
  border: 1px solid var(--Stroke-COZ-stroke-plus, rgba(68, 83, 130, 25%));
  border-radius: var(--Radius-Default, 6px);

  .placeholder-message-header{
    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    width: 100%;
    height: 28px;
    padding: 0px 8px;

    font-size: 12px;
    background: var(--Mg-COZ-mg-secondary, rgba(90, 108, 167, 0.04));

    border-bottom: 1px solid var(--Stroke-COZ-stroke-primary, rgba(82, 100, 154, 13%));
  }
}

.loop-variable-input{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  :global{
    .semi-input-wrapper{
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
      .semi-input{
        padding: 0 !important;
      }
    }
  }

  input::placeholder {
    color:var(--coz-fg-dim);
  }
}
